<template>
  <div v-if="createAuth" class="container">
    <!-- 头部 -->
    <page-header
      :title="
        formList.id ? $t('m.Edit_Program_List') : $t('m.Add_program_list')
      "
      :has-return="true"
    >
    </page-header>

    <!-- 节目单信息 -->
    <div class="table_top">
      <div class="table_box_title1">{{ $t('m.Program_information') }}</div>
      <el-form :model="formList" :rules="formRule1" ref="formRule1">
        <div class="table_top_input">
          <div class="table_top_input_div" style="margin-right:20px;">
            <div class="table_box_title2">{{ $t('m.program_title') }}*</div>
            <el-form-item prop="title">
              <el-input
                :placeholder="$t('m.Please_enter')"
                v-model="formList.title"
                clearable
                maxlength="20"
              ></el-input>
            </el-form-item>
          </div>
          <div class="table_top_input_div">
            <div class="table_box_title2">{{ $t('m.Delivery_date') }}*</div>
            <div style="display:flex;">
              <el-form-item prop="deliveryTime">
                <el-date-picker
                  v-model="formList.deliveryTime"
                  type="datetime"
                  value-format="timestamp"
                  popper-class="el_date_picker"
                  :placeholder="$t('m.pleaseChoose')"
                  :picker-options="pickerOptions2"
                >
                </el-date-picker>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </div>

    <!-- 选择广告 -->
    <div class="table_center webkit_scrollbars webkit_scrollbar_track">
      <div
        class="table_center_top"
        :style="
          (imgListsShow.length == 0 && formList.fileType == 1) ||
          (videoListsShow.length == 0 && formList.fileType == 2)
            ? 'padding:24px;'
            : ''
        "
      >
        <div class="table_box_title1" style="margin-bottom:20px;">
          {{ $t('m.Select_advertisement') }}
        </div>
        <div class="table_box_title2">{{ $t('m.invite_Type') }}*</div>
        <div class="select_radio">
          <div
            class="select_radio_div"
            v-for="item in selectList"
            :key="item.fileType"
            :class="{
              select_radio_active: item.disabled
            }"
            @click="changeRadio(item)"
          >
            <div
              class="select_radio_div_text"
              :class="{
                select_radio_div_text_active: item.disabled
              }"
            >
              {{ item.label }}
            </div>
            <img
              :src="
                item.disabled
                  ? require('@/assets/imgs/work/ic_selected.svg')
                  : require('@/assets/imgs/work/ic_unselected@2x.png')
              "
              alt=""
              width="14px"
              height="14px"
            />
          </div>
        </div>
        <el-form
          :model="formList"
          :rules="formRule2"
          ref="formRule2"
          v-show="formList.fileType == 1"
        >
          <div class="table_top_input">
            <div class="table_box_title2" style="line-height:19px;">
              {{ $t('m.Image_playback_interval') }}*
            </div>
            <el-form-item prop="playTime">
              <el-input
                :placeholder="$t('m.Please_enter')"
                v-model="formList.playTime"
                @input="changeTime"
                clearable
                maxlength="20"
                style="width:486px;"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div
          :style="
            formList.fileType == 1 ? 'margin-top:-2px;' : 'margin-top:8px;'
          "
          class="table_center_button"
        >
          <el-button
            class="table_el_button"
            :class="{
              table_el_button2:
                (imgListsShow.length == 0 && formList.fileType == 1) ||
                (videoListsShow.length == 0 && formList.fileType == 2)
            }"
            @click="openAds"
            >{{ $t('m.Select_advertisement') }}</el-button
          >
          <div
            class="table_box_title3"
            v-show="
              (imgListsShow.length > 0 && formList.fileType == 1) ||
                (videoListsShow.length > 0 && formList.fileType == 2)
            "
          >
            <span>{{
              $t('m.Select_advertisement_number').replace(
                'XX',
                formList.fileType == 1
                  ? imgListsShow.length
                  : videoListsShow.length
              )
            }}</span>
            <span
              >{{ $t('m.Available_storage') }}:
              {{ $format.formatBytes(storage.remainCount) }}</span
            ><span
              >{{ $t('m.Used_storage') }}:
              {{ $format.formatBytes(storage.usedCount) }}</span
            >
          </div>
        </div>
      </div>
      <el-divider
        class="el_divider"
        v-show="
          (imgListsShow.length > 0 && formList.fileType == 1) ||
            (videoListsShow.length > 0 && formList.fileType == 2)
        "
      ></el-divider>
      <div
        class="table_center_img"
        v-show="
          (imgListsShow.length > 0 && formList.fileType == 1) ||
            (videoListsShow.length > 0 && formList.fileType == 2)
        "
        :class="{
          active2:
            (imgListsShow.length > 12 && formList.fileType == 1) ||
            (videoListsShow.length > 12 && formList.fileType == 2)
        }"
      >
        <div
          class="table_center_img_div"
          v-for="(item, index) in formList.fileType == 1
            ? imgListsShow
            : videoListsShow"
          :key="item.id"
        >
          <div
            class="table_center_img_div_img"
            :style="item.state == 2 ? 'border:1px solid #ff605a;' : ''"
          >
            <el-image
              v-if="formList.fileType == 1"
              :src="fileUrlFormat(item.url)"
              :preview-src-list="[fileUrlFormat(item.url)]"
              alt=""
              class="img_across"
              fit="cover"
            />
            <video
              v-else
              :src="fileUrlFormat(item.url)"
              class="img_across"
            ></video>
            <img
              src="@/assets/imgs/ic_play@2x.png"
              alt=""
              class="video_img"
              v-show="formList.fileType == 2"
              @click.stop="playVideo(item.url)"
            />
            <img
              src="@/assets/imgs/ic_del@2x.png"
              alt=""
              class="del_img"
              @click.stop="delImg(index, item.id)"
            />
            <div
              src="@/assets/imgs/ic_del@2x.png"
              alt=""
              class="span_tip"
              v-show="item.state == 2"
            >
              {{ $t('m.Program_off') }}
            </div>
          </div>
          <div>
            <el-tooltip :content="item.title" placement="top-start"
              ><div class="table_center_img_div_text2">
                {{ item.title }}
              </div></el-tooltip
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 选择机柜 -->
    <div
      class="table-box table_box"
      :class="{ table_box_div: selectStation.length > 0 }"
      :style="selectStation.length == 0 ? 'padding-bottom:24px;' : ''"
    >
      <div class="table_box_title1" style="margin:10px 0 20px 0;">
        {{ $t('m.Select_station') }}
      </div>
      <div
        :style="selectStation.length > 0 ? 'margin-bottom:20px;' : ''"
        class="table_center_button"
        style="justify-content: space-between;align-items: flex-start;"
      >
        <div style="display: flex;align-items: center;">
          <el-button
            class="table_el_button"
            :class="{ table_el_button2: selectStation.length == 0 }"
            @click="issuePlayer"
            >{{ $t('m.Select_station') }}</el-button
          >
          <div class="table_box_title3" v-show="selectStation.length > 0">
            <span>{{
              $t('m.Select_Station_number').replace('XX', selectStation.length)
            }}</span>
          </div>
        </div>
        <el-button
          class="table_el_button"
          @click="deleteStations"
          style="margin-right:0;"
          v-show="selectStation.length > 0"
          >{{ lang.Delete_station_batch }}</el-button
        >
      </div>
      <!--表格-->
      <el-table
        :data="
          selectStation
            ? selectStation.slice(
                (params.pageNum - 1) * params.pageSize,
                params.pageNum * params.pageSize
              )
            : selectStation
        "
        v-show="selectStation.length > 0"
        :row-key="getId"
        ref="stationId"
        @selection-change="handleSelectionId"
      >
        <emptydata slot="empty" v-if="selectStation.length == 0" />
        <el-table-column type="selection" width="56" :reserve-selection="true">
        </el-table-column>
        <el-table-column
          :label="$t('m.Station_SN')"
          prop="cabinetNo"
          fixed
          min-width="104"
        />
        <el-table-column
          :label="'IMEI'"
          prop="imei"
          show-overflow-tooltip
          min-width="173"
        >
        </el-table-column>
        <el-table-column
          :label="$t('m.Screen_direction')"
          show-overflow-tooltip
          min-width="127"
        >
          <template #default="scope">
            <div
              style="display: flex;align-items: center;justify-content: center;"
            >
              <span class="table_box_across" v-if="scope.row.style == 0"></span>
              <span class="table_box_vertical" v-else></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('m.Station_List_placeholder_Device_info')"
          prop="deviceCount"
          show-overflow-tooltip
          min-width="104"
        >
        </el-table-column>
        <el-table-column
          :label="$t('m.Shop_Details_Franchisee')"
          prop="agentName"
          min-width="130"
        >
          <template #default="scope">
            {{ scope.row.agentName | strFormat }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('m.Shop_name')"
          prop="branchName"
          min-width="127"
        >
          <template #default="scope">
            {{ scope.row.branchName | strFormat }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('m.status')" min-width="121">
          <template #default="scope">
            {{ scope.row.state | valFormat(options3) | strFormat }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('m.Users_Details_Operation')"
          min-width="127"
        >
          <template #default="scope">
            <el-button
              type="text"
              style="color:var(--text-color);border:none;"
              @click.native="deleteCabinet(scope.$index, scope.row.imei)"
              >{{ $t('m.delete') }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="fenye" v-if="selectStation.length > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page.sync="params.pageNum"
          :page-size="params.pageSize"
          :total="selectStation.length"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="table_bottom">
      <div class="table_bottom_btn" @click="submitForm('formList')">
        {{ $t('m.save') }}
      </div>
    </div>

    <!-- 选择广告 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="chooseDialog"
      :title="$t('m.Select_advertisement')"
      width="944px"
      append-to-body
      custom-class="adadad"
      @close="cancelChoose"
    >
      <el-divider class="el_divider"></el-divider>
      <div style="display:flex;" class="webkit_scrollbars">
        <div
          class="el_dialog_left"
          :class="{ active2: groupsList.length > 13 }"
        >
          <div
            class="el_dialog_left_div"
            v-for="(item, index) in groupsList"
            :class="{ active1: groupIndex == index }"
            :key="item.id"
            @click="choiceIndex(index, item)"
          >
            <div :class="{ active1: groupIndex == index }">
              <eltooltip
                :content="
                  item.defaulted ? $t('m.All_advertisements') : item.title
                "
              ></eltooltip>
            </div>
          </div>
        </div>
        <div class="el_dialog_line"></div>
        <div style="flex:1;" class="webkit_scrollbars">
          <div class="list_div">
            <div class="page_list_div" style="padding:20px 24px 8px 24px;">
              <el-form class="page_list_top" label-position="right">
                <el-form-item class="page_list_top">
                  <el-input
                    style="width:200px"
                    :placeholder="$t('m.Help_Title')"
                    v-model="adsParams.search"
                    prefix-icon="el-icon-search"
                    clearable
                  />
                </el-form-item>
                <el-form-item class="page_list_top page_list_search">
                  <el-button
                    class="search_button reset_button"
                    @click="searchAds()"
                  >
                    {{ $t('m.search_') }}</el-button
                  >
                </el-form-item>
                <el-form-item class="page_list_top">
                  <el-button class="reset_button" @click="resetAds">
                    {{ $t('m.refresh') }}</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>

          <el-divider class="el_divider"></el-divider>
          <emptydata slot="empty" v-if="programLists.length == 0" />
          <div
            class="table_center_img webkit_scrollbars"
            style="max-height: 446px;"
            :class="{ active2: programLists.length > 12 }"
          >
            <div
              class="table_center_img_div"
              v-for="item in programLists"
              :key="item.id"
              @click="chooseItem(item)"
            >
              <div
                class="table_center_img_div_img"
                :class="{
                  active3:
                    (formList.fileType == 1 && imgIds.indexOf(item.id) > -1) ||
                    (formList.fileType == 2 && videoIds.indexOf(item.id) > -1)
                }"
              >
                <el-image
                  @click.stop=""
                  v-if="item.fileType == 1"
                  :src="fileUrlFormat(item.url)"
                  :preview-src-list="[fileUrlFormat(item.url)]"
                  alt=""
                  class="img_across"
                  fit="cover"
                />
                <video
                  v-else
                  @click.stop=""
                  :src="fileUrlFormat(item.url)"
                  class="img_across"
                ></video>
                <img
                  src="@/assets/imgs/ic_play@2x.png"
                  alt=""
                  class="video_img"
                  v-show="item.fileType == 2"
                  @click.stop="playVideo(item.url)"
                />
                <span
                  class="img_span"
                  v-show="
                    (formList.fileType == 1 && imgIds.indexOf(item.id) > -1) ||
                      (formList.fileType == 2 && videoIds.indexOf(item.id) > -1)
                  "
                  >{{
                    formList.fileType == 1
                      ? imgIds.indexOf(item.id) + 1
                      : videoIds.indexOf(item.id) + 1
                  }}</span
                >
                <span @click.stop="">{{
                  $format.formatBytest(item.fileSize)
                }}</span>
              </div>
              <div class="table_center_img_div_text" @click.stop="">
                <eltooltip :content="item.title"></eltooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-divider class="el_divider"></el-divider>
      <div class="el_dialog_foot el_dialog_foot2">
        <div class="table_box_title3">
          <span>{{
            $t('m.Select_advertisement_number').replace(
              'XX',
              formList.fileType == 1 ? imgIds.length : videoIds.length
            )
          }}</span>
          <span
            >{{ $t('m.Available_storage') }}:
            {{ $format.formatBytes(storage.remainCount) }}</span
          ><span
            >{{ $t('m.Used_storage') }}:
            {{ $format.formatBytes(storage.usedCount) }}</span
          >
        </div>
        <div>
          <el-button
            class="el_button"
            style="min-width:160px;"
            @click="cancelChoose"
            >{{ $t('m.cancel') }}</el-button
          >
          <el-button
            class="el_button el_button2"
            style="min-width:160px;"
            :style="
              (formList.fileType == 1 && imgIds.length == 0) ||
              (formList.fileType == 2 && videoIds.length == 0)
                ? 'opacity: 0.5;'
                : ''
            "
            @click="confirmChoose"
            :disabled="
              (formList.fileType == 1 && imgIds.length == 0) ||
                (formList.fileType == 2 && videoIds.length == 0)
            "
            >{{ $t('m.confirm_') }}</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 获取机柜 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="issueDialog"
      :title="$t('m.Select_station')"
      width="930px"
      append-to-body
    >
      <div class="list_div">
        <div class="page_list_div" style="padding:0px 0px 8px 0px;">
          <el-form class="page_list_top" label-position="right">
            <el-form-item class="page_list_top">
              <el-input
                style="width:300px"
                :placeholder="$t('m.Station_List_placeholder')"
                v-model="stationParams.search"
                prefix-icon="el-icon-search"
                clearable
              />
            </el-form-item>
            <el-form-item
              :label="$t('m.Screen_direction') + ':'"
              class="page_list_top"
            >
              <el-select
                v-model="stationParams.style"
                ref="select2"
                @change="clickSearch(2)"
                :placeholder="$t('m.pleaseChoose')"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="page_list_top page_list_search">
              <el-button
                class="search_button reset_button"
                @click="clickSearch()"
              >
                {{ $t('m.search_') }}</el-button
              >
            </el-form-item>
            <el-form-item class="page_list_top">
              <el-button class="reset_button" @click="clickReset">
                {{ $t('m.refresh') }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="el_dialog_center webkit_scrollbars" style="padding-top:0;">
        <div class="el_table_div" style="padding:0;">
          <el-table
            :data="stationLists"
            max-height="440px"
            style="width:100%;"
            :row-key="getStationId"
            ref="adsId"
            @selection-change="handleSelectionChange"
          >
            <emptydata slot="empty" v-if="stationLists.length == 0" />
            <el-table-column
              type="selection"
              width="56"
              :reserve-selection="true"
            >
            </el-table-column>
            <el-table-column
              :label="$t('m.Station_SN')"
              prop="cabinetNo"
              min-width="104"
            />
            <el-table-column
              :label="'IMEI'"
              prop="imei"
              show-overflow-tooltip
              min-width="166"
            >
            </el-table-column>
            <el-table-column
              :label="$t('m.Screen_direction')"
              show-overflow-tooltip
              min-width="135"
            >
              <template #default="scope">
                <div
                  style="display: flex;align-items: center;justify-content: center;"
                >
                  <span
                    class="table_box_across"
                    v-if="scope.row.style == 0"
                  ></span>
                  <span class="table_box_vertical" v-else></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('m.Station_List_placeholder_Device_info')"
              prop="deviceCount"
              show-overflow-tooltip
              min-width="104"
            >
            </el-table-column>
            <el-table-column
              :label="$t('m.Shop_Details_Franchisee')"
              prop="agentName"
              min-width="135"
            >
              <template #default="scope">
                {{ scope.row.agentName | strFormat }}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('m.Shop_name')"
              prop="branchName"
              min-width="135"
            >
              <template #default="scope">
                {{ scope.row.branchName | strFormat }}
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="totals"
            :current="stationParams.pageNum"
            :size="stationParams.pageSize"
            @changePageSize="handleSizeChange2"
            @changePageNum="handleCurrentChange2"
          >
          </pagination>
        </div>
      </div>
      <div class="el_dialog_foot">
        <el-button
          class="el_button"
          style="min-width:160px;"
          @click="cancelBtn()"
          >{{ $t('m.cancel') }}</el-button
        >
        <el-button
          class="el_button el_button2"
          style="min-width:160px;"
          :style="stations.length == 0 ? 'opacity: 0.5;' : ''"
          :disabled="stations.length == 0"
          @click="confirmBtn()"
          >{{ $t('m.confirm_') }}</el-button
        >
      </div>
    </el-dialog>

    <!-- 查看视频 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="playDialog"
      :title="$t('m.play_video')"
      width="640px"
      append-to-body
      @close="closePlay"
    >
      <div class="el_dialog_center">
        <video
          :src="fileUrlFormat(urlVideo)"
          controls="controls"
          autoplay="autoplay"
          class="play_video"
        ></video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import share from '../../mixins/share'
// import PageHeader from '../../common/module/page-header.vue'
import pagination from '@/components/pagination.vue'

export default {
  components: { pagination },
  // mixins: [share],
  data () {
    return {
      lang: this.$t('m'),
      params: {
        pageNum: 1,
        pageSize: 10
      },
      playerLists: [], //节目单-列表
      total: 0,
      options1: [
        { value: '', label: this.$t('m.all') },
        { value: 0, label: this.$t('m.program_img') },
        { value: 1, label: this.$t('m.program_Video') }
      ],
      options2: [
        { value: '', label: this.$t('m.all') },
        { value: 0, label: this.$t('m.Screen_horizontal') },
        { value: 1, label: this.$t('m.Screen_vertical') }
      ],
      issueDialog: false,
      stationParams: {
        search: '',
        style: '',
        pageNum: 1,
        pageSize: 10
      },
      stationLists: [], //机柜列表
      totals: 0,
      //类型
      selectList: [
        {
          fileType: 1,
          label: this.$t('m.program_img'),
          disabled: true
        },
        {
          fileType: 2,
          label: this.$t('m.program_Video'),
          disabled: false
        }
      ],
      chooseDialog: false,
      playerList: this.$cache.auth(81),
      playerAdd: this.$cache.auth(84),
      playerEdit: this.$cache.auth(85),
      formList: {
        advertIds: [], //	广告ID集合
        deliveryTime: '', //	下发时间
        fileType: 1, //	文件类型：1-图片 2-视频
        id: null,
        imeiList: [], //	机柜IMEI集合
        playTime: '', //	轮播时间(单位：秒)
        title: '' //	标题
      },
      formRule1: {
        title: [
          {
            required: true,
            message: this.$t('m.This_field_required'),
            trigger: 'blur'
          }
        ],
        deliveryTime: [
          {
            required: true,
            message: this.$t('m.This_field_required'),
            trigger: 'blur'
          }
        ]
      },
      formRule2: {
        playTime: [
          {
            required: true,
            message: this.$t('m.This_field_required'),
            trigger: 'blur'
          }
        ]
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        },
        shortcuts: [],
        selectableRange:
          new Date().getHours() +
          ':' +
          (new Date().getMinutes() + 0) +
          `:${new Date().getSeconds()} - 23:59:59`
      },
      groupsList: [], //广告组
      groupItem: '', //广告组对象
      groupIndex: 0, //广告组index
      adsParams: {
        search: '',
        fileType: '',
        groupId: '',
        state: 1
      }, //搜索参数
      programLists: [], //广告
      imgLists: [], //选中的图片
      imgListsShow: [], //选中的图片-回显
      videoLists: [], //选中的视频
      videoListsShow: [], //选中的视频-回显
      playDialog: false,
      urlVideo: '',
      stations: [], //选中的机柜
      selectStation: [], //选中的机柜-回显
      options3: [
        {
          value: 0,
          label: this.$t('m.Station_Status_Off')
        },
        {
          value: 1,
          label: this.$t('m.Station_Status_On')
        },
        {
          value: 3,
          label: this.$t('m.agency_activated')
        }
      ],
      storage: {
        remainCount: 0,
        totalCount: 100,
        usedCount: 0
      },
      imgIds: [], // 选中的图片id
      videoIds: [], // 选中的视频id
      delStations: [], //选中的机柜
      createAuth: this.permissionsId(84)
    }
  },
  computed: {
    pickerOptions2 () {
      let newVal = new Date(this.formList.deliveryTime)
      let selectableRange = '00:00:00 - 23:59:00'
      if (
        newVal &&
        newVal.getFullYear() == new Date().getFullYear() &&
        newVal.getMonth() == new Date().getMonth() &&
        newVal.getDate() == new Date().getDate()
      ) {
        //如果为今天，则限制当前时间前的时间+1分钟不能选择。
        selectableRange =
          new Date().getHours() +
          ':' +
          (new Date().getMinutes() + 0) +
          `:${new Date().getSeconds()} - 23:59:59`
      } else {
        selectableRange = '00:00:00 - 23:59:00'
      }
      return {
        selectableRange,
        disabledDate (time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        }
      }
    }
  },
  created () {
    if (!this.createAuth) {
      return
    }
    // console.log(new Date().getSeconds());
    if (!this.$route.query.id) {
      this.formList.deliveryTime = Date.parse(new Date())
    } else {
      this.getDetail(this.$route.query.id)
    }
    // console.log(this.formList)
  },
  methods: {
    //获取节目单详情
    getDetail (e) {
      this.$api.ad.getProgramsDetail(e).then(res => {
        if (res.code == 0) {
          this.selectList.forEach(item => {
            item.fileType == res.data.fileType
              ? (item.disabled = true)
              : (item.disabled = false)
          })
          this.formList.deliveryTime = res.data.deliveryTime
          this.formList.fileType = res.data.fileType
          this.formList.id = res.data.id
          this.formList.playTime =
            res.data.fileType == 1 ? res.data.playTime : ''
          this.formList.title = res.data.title
          this.selectStation = res.data.cabinetList
          this.storage = res.data.storage
          if (res.data.fileType == 1) {
            this.imgIds = res.data.advertList.map(item => item.id)
            this.imgListsShow = res.data.advertList
          } else {
            this.videoIds = res.data.advertList.map(item => item.id)
            this.videoListsShow = res.data.advertList
          }
          // console.log(this.formList, this.imgIds, this.videoIds)
        }
      })
    },

    //限制时间输入
    changeTime (val) {
      this.formList.playTime = this.$check.noZero(val)
    },

    //校验表单
    async submitForm () {
      try {
        await Promise.all([
          this.$refs.formRule1.validate(),
          this.formList.fileType == 1 ? this.$refs.formRule2.validate() : ''
        ])
        if (
          (this.imgIds.length == 0 && this.formList.fileType == 1) ||
          (this.videoIds.length == 0 && this.formList.fileType == 2)
        ) {
          this.$message.error(this.$t('m.Please_selec_advertisement'))
          return
        }
        // console.log(this.formList, this.imgIds, this.videoIds)
        // return
        this.formList.advertIds =
          this.formList.fileType == 1
            ? this.imgListsShow.map(item => item.id)
            : this.videoListsShow.map(item => item.id)
        this.formList.imeiList = this.selectStation.map(item => item.imei)
        this.$api.ad[this.formList.id ? 'editPrograms' : 'addPrograms'](
          this.formList
        ).then(res => {
          if (res.code == 0) {
            this.$message.success(res.message)
            if (!this.formList.id) {
              this.remPageNum()
            }
            this.$router.go(-1)
          } else {
            this.$message.error(res.message)
          }
        })
      } catch (error) {
        // 验证失败
        // console.log('error submit!!')
        return
      }
    },

    //打开选择广告弹窗
    openAds () {
      if (this.formList.fileType == 1) {
        this.imgIds = this.imgListsShow
          .filter(item => item.state == 1)
          .map(item => item.id)
        // console.log(this.imgIds)
        this.imgLists = [...this.imgListsShow]
        this.storage.usedCount = this.imgListsShow.reduce(
          (sum, e) => sum + Number(e.fileSize || 0),
          0
        )
        this.storage.remainCount = 104857600 - this.storage.usedCount
      } else {
        this.videoIds = this.videoListsShow
          .filter(item => item.state == 1)
          .map(item => item.id)
        this.videoLists = [...this.videoListsShow]
        this.storage.usedCount = this.videoListsShow.reduce(
          (sum, e) => sum + Number(e.fileSize || 0),
          0
        )
        this.storage.remainCount = 104857600 - this.storage.usedCount
      }
      this.getADsGroup()
    },

    //广告组-获取全部
    getADsGroup () {
      this.$api.ad.getADsGroups().then(res => {
        if (res.code == 0) {
          this.adsParams.search = ''
          this.groupIndex = 0
          this.groupsList = res.data
          this.groupItem = res.data[0]
          this.getAllAd()
          this.chooseDialog = true
        } else {
          this.$message.error(res.message)
        }
      })
    },

    //选择广告组
    choiceIndex (index, item) {
      this.adsParams.search = ''
      this.groupIndex = index
      this.groupItem = item
      this.getAllAd()
    },

    //获取组内所有广告
    getAllAd () {
      this.programLists = []
      this.adsParams.fileType = this.formList.fileType
      this.adsParams.groupId = this.groupItem.id
      this.$api.ad.getAllAds(this.adsParams).then(res => {
        if (res.code == 0) {
          this.programLists = res.data
        }
      })
    },

    //搜索广告
    searchAds () {
      this.getAllAd()
    },

    //重置广告
    resetAds () {
      this.adsParams.search = ''
      this.getAllAd()
    },

    //选中广告
    chooseItem (item) {
      if (this.formList.fileType == 1) {
        const selectId1 = this.imgIds.indexOf(item.id)
        const selectItemImg1 = this.imgLists.findIndex(
          items => items.id == item.id
        )
        if (selectId1 > -1) {
          this.imgIds.splice(selectId1, 1)
        } else {
          this.imgIds.push(item.id)
        }
        if (selectItemImg1 != -1) {
          this.imgLists.splice(selectItemImg1, 1)
        } else {
          this.imgLists.push(item)
        }
        this.storage.usedCount = this.imgLists.reduce(
          (sum, e) => sum + Number(e.fileSize || 0),
          0
        )
        this.storage.remainCount = 104857600 - this.storage.usedCount
        if (this.storage.remainCount < 0) {
          this.imgLists.splice(selectItemImg1, 1)
          this.imgIds.splice(selectId1, 1)
          this.$message.error(this.$t('m.File_sizes'))
          this.storage.usedCount = this.imgLists.reduce(
            (sum, e) => sum + Number(e.fileSize || 0),
            0
          )
          this.storage.remainCount = 104857600 - this.storage.usedCount
        }
      } else {
        const selectId2 = this.videoIds.indexOf(item.id)
        const selectItemImg2 = this.videoLists.findIndex(
          items => items.id == item.id
        )
        if (selectId2 > -1) {
          this.videoIds.splice(selectId2, 1)
        } else {
          this.videoIds.push(item.id)
        }

        if (selectItemImg2 != -1) {
          this.videoLists.splice(selectItemImg2, 1)
        } else {
          this.videoLists.push(item)
        }
        this.storage.usedCount = this.videoLists.reduce(
          (sum, e) => sum + Number(e.fileSize || 0),
          0
        )
        this.storage.remainCount = 104857600 - this.storage.usedCount
        if (this.storage.remainCount < 0) {
          this.videoLists.splice(selectItemImg2, 1)
          this.videoIds.splice(selectId2, 1)
          this.$message.error(this.$t('m.File_sizes'))
          this.storage.usedCount = this.videoLists.reduce(
            (sum, e) => sum + Number(e.fileSize || 0),
            0
          )
          this.storage.remainCount = 104857600 - this.storage.usedCount
        }
      }
    },

    //关闭选择广告
    cancelChoose () {
      this.chooseDialog = false
    },

    //确认选择广告
    confirmChoose () {
      if (
        (this.imgIds.length == 0 && this.formList.fileType == 1) ||
        (this.formList.fileType == 2 && this.videoIds.length == 0)
      ) {
        return
      }
      if (this.formList.fileType == 1) {
        this.imgListsShow = [...this.imgLists]
      } else {
        this.videoListsShow = [...this.videoLists]
      }
      // console.log(this.imgListsShow, this.videoListsShow)
      this.chooseDialog = false
    },

    //节目单-播放视频
    playVideo (item) {
      this.urlVideo = item
      this.playDialog = true
    },
    //节目单-关闭视频
    closePlay () {
      this.playDialog = false
      this.urlVideo = ''
    },

    //获取机柜
    issuePlayer () {
      this.clickReset()
      this.issueDialog = true
    },

    // 设备列表
    getEqList () {
      this.$api.ad.getEquipment(this.stationParams).then(res => {
        if (res.code == 0) {
          this.stationLists = res.data.records
          // console.log(this.selectStation)
          this.totals = res.data.total
          if (this.selectStation.length > 0) {
            this.selectStation.forEach(item => {
              this.$refs.adsId.toggleRowSelection(item, true)
            })
          }
          // const list = []
          // this.selectStation.forEach(item => {
          //   const findIndex = res.data.records.findIndex(
          //     items => items.imei == item.imei
          //   )
          //   if (findIndex > -1) {
          //     list.push(item)
          //   }
          // })
          // if (list.length > 0) {
          //   list.forEach(item => {
          //     this.$refs.adsId.toggleRowSelection(item, true)
          //   })
          // }
        }
      })
    },
    handleSizeChange2 (val) {
      this.stationParams.pageSize = val
      this.getEqList()
    },
    handleCurrentChange2 (val) {
      this.stationParams.pageNum = val
      this.getEqList()
    },

    //设备列表-搜索
    clickSearch (e) {
      this.stationParams.pageNum = 1
      this.getEqList()
      this.$nextTick(() => {
        e ? this.$refs[`select${e}`].blur() : ''
      })
    },

    //设备列表-重置
    clickReset () {
      this.stationParams = this.$options.data.call(this).stationParams
      this.getEqList()
    },

    //取消设备
    cancelBtn () {
      this.issueDialog = false
      this.$refs.adsId.clearSelection()
    },

    //确认设备
    confirmBtn () {
      this.selectStation = [...this.stations]
      this.$refs.adsId.clearSelection()
      this.issueDialog = false
    },

    // 机柜imei
    getStationId (row) {
      return row.imei
    },

    // 选中的机柜
    handleSelectionChange (e) {
      this.stations = e
    },

    //删除机柜
    deleteCabinet (index, imei) {
      this.selectStation.splice(index, 1)
      this.stations = this.stations.filter(item => item.imei !== imei)
      // console.log(this.selectStation, this.stations)
    },

    //切换机柜分页
    handleCurrentChange (val) {
      this.params.pageNum = val
    },

    //切换类型
    changeRadio (items) {
      this.selectList.forEach(item => {
        item.fileType == items.fileType
          ? (item.disabled = true)
          : (item.disabled = false)
      })
      this.formList.fileType = items.fileType
    },

    //删除广告
    async delImg (index, id) {
      if (this.formList.fileType == 1) {
        await this.imgListsShow.splice(index, 1)
        await this.imgLists.splice(index, 1)
        this.imgIds = this.imgIds.filter(item => item !== id)
        this.storage.usedCount = this.imgListsShow.reduce(
          (sum, e) => sum + Number(e.fileSize || 0),
          0
        )
        this.storage.remainCount = 104857600 - this.storage.usedCount
      } else {
        await this.videoListsShow.splice(index, 1)
        await this.videoLists.splice(index, 1)
        this.videoIds = this.videoIds.filter(item => item !== id)
        this.storage.usedCount = this.imgListsShow.reduce(
          (sum, e) => sum + Number(e.fileSize || 0),
          0
        )
        this.storage.remainCount = 104857600 - this.storage.usedCount
      }
    },

    // 机柜imei
    getId (row) {
      return row.imei
    },

    // 选中的机柜
    handleSelectionId (e) {
      this.delStations = e
    },

    //批量删除机柜
    deleteStations () {
      if (this.delStations.length == 0) {
        this.$message.error(this.$t('m.Delete_play_select'))
        return
      } else {
        this.selectStation = this.selectStation.filter(
          item1 => !this.delStations.some(item2 => item2.imei === item1.imei)
        )
        this.stations = this.stations.filter(
          item1 => !this.delStations.some(item2 => item2.imei === item1.imei)
        )
        this.clearTable()
      }
    },
    // 清空选中的
    clearTable () {
      this.delStations = this.$options.data.call(this).delStations
      this.$refs.stationId.clearSelection()
    }
  }
}
</script>
<style>
.el_date_picker .el-picker-panel__sidebar {
  display: none;
}
.el_date_picker .el-picker-panel__sidebar + .el-picker-panel__body {
  margin-left: 0;
}
.el_date_picker .el-picker-panel__content {
  width: initial !important;
}
.el_date_picker .el-date-table td.current:not(.disabled) span {
  background: var(--text-color);
}
.el_date_picker .el-date-table td.today span {
  color: var(--text-color) !important;
  background: #fff !important;
}
.el_date_picker .el-button {
  color: #39404d;
}
.el_date_picker .el-button--text {
  color: var(--text-color);
}
.el_date_picker .el-button--text:hover {
  color: var(--text-color) !important;
}
.el_date_picker .el-button.is-plain:hover {
  color: var(--text-color) !important;
  border-color: var(--text-color) !important;
}
.el_date_picker .el-picker-panel__icon-btn:hover {
  color: var(--text-color);
}
.adadad .el-dialog__body {
  padding: 0px !important;
}
</style>
<style scoped lang="scss">
.container {
  width: 100%;
  padding-bottom: 84px !important;
  ::v-deep .el-form-item__content {
    line-height: initial !important;
  }
}

.page-header {
  width: 1064px !important;
  min-width: initial !important;
  padding: 20px 0 !important;
}
.table-box {
  width: 1064px !important;
  min-width: initial !important;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px !important;
}

// .table_box_div {
//   padding-bottom: 8px;
// }

.table_top {
  width: 1064px;
  background: #ffffff;
  border-radius: 10px;
  padding: 24px;
  .table_top_input {
    display: flex;
    .table_top_input_div {
      width: 50%;
    }
  }
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
}

.table_center {
  width: 1064px;
  background: #ffffff;
  // padding-bottom: 4px;
  border-radius: 10px;
  margin: 20px 0;
  .table_center_top {
    padding: 24px 24px 20px;
  }
  .select_radio {
    display: flex;
    flex-wrap: wrap;
    .select_radio_div {
      width: 120px;
      padding: 10px 16px;
      background: #ffffff;
      border: 1px solid #d2d8e2;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      margin-right: 12px;
      margin-bottom: 12px;
      height: 36px;
      .select_radio_div_text {
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #39404d;
        line-height: 16px;
        margin-right: 10px;
      }
      .select_radio_div_text_active {
        color: var(--text-color) !important;
      }
    }
    .select_radio_active {
      border: 2px solid var(--text-color);
      padding: 9px 15px;
    }
    .select_radio_disable {
      background: #f5f7fa;
      cursor: not-allowed;
    }
  }
}

.table_center_button {
  display: flex;
  align-items: center;
  .table_el_button {
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #d2d8e2;
    border-radius: 4px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-right: 20px;
  }
  .table_el_button2 {
    width: 486px;
  }
}

.webkit_scrollbar_track {
  ::-webkit-scrollbar-track {
    border-radius: 0 0 10px 0;
  }
}

.webkit_scrollbar_track_not {
  ::-webkit-scrollbar-track {
    border-left: inherit;
    border-radius: 0;
  }
}

.table_box_title1 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  color: #39404d;
  // line-height: 22px;
}

.table_box_title2 {
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: #39404d;
  line-height: 22px;
  margin: 8px 0 12px 0;
}

.table_box_title3 {
  font-size: 14px;
  text-align: left;
  font-weight: 400;
  color: #646b80;
  line-height: 16px;
  display: flex;
  align-items: center;
  span {
    display: block;
    margin-right: 20px;
  }
}

.table_center_img {
  max-height: 308px;
  padding: 0 0 20px 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  // overflow: hidden;
  // overflow-y: scroll; //纵行超过隐藏
  border-radius: 10px;
  .table_center_img_div {
    margin: 20px 20px 24px 0;
    width: 150px;
    height: 100px;
    .table_center_img_div_img {
      width: 150px;
      height: 100px;
      background: #f5f5f7;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .img_across {
        max-width: 80px;
        height: 50px;
        border-radius: 2px;
      }
      .img_vertical {
        width: 50px;
        height: 80px;
        border-radius: 2px;
      }
      span {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 20px;
        opacity: 0.2;
        background: #200000;
        border-radius: 5px 0 5px 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #ffffff;
        line-height: 14px;
        padding: 0 8px;
      }
      .video_img {
        position: absolute;
        width: 20px;
        height: 20px;
        cursor: pointer;
        z-index: 5;
      }
      .img_span {
        position: absolute;
        cursor: pointer;
        z-index: 5;
        top: 0;
        background: none;
        border-radius: 50%;
        color: var(--text-color);
        height: 20px;
        padding: 0 5px;
        opacity: 1;
        font-size: 14px;
      }
      .del_img {
        position: absolute;
        width: 20px;
        height: 20px;
        cursor: pointer;
        z-index: 5;
        right: 5px;
        bottom: 5px;
      }
      .span_tip {
        position: absolute;
        height: 20px;
        // cursor: pointer;
        font-size: 12px;
        text-align: right;
        color: #ff605a;
        z-index: 5;
        right: 5px;
        top: 3px;
      }
    }
    .table_center_img_div_text {
      width: 150px;
      font-size: 12px !important;
      font-weight: 500;
      text-align: center;
      color: #39404d;
      // height: 14px !important;
      margin-top: 8px;
      padding: 0 16px;
      ::v-deep .el-tooltip {
        font-size: 12px !important;
        font-weight: 500;
        text-align: center;
        color: #39404d;
      }
    }
    .table_center_img_div_text2 {
      width: calc(100% - 32px);
      font-size: 12px !important;
      font-weight: 500;
      text-align: center;
      color: #39404d;
      // height: 14px !important;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      display: block;
      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-line-clamp: 1; /* 显示的行数 */
      margin-top: 8px;
      margin-left: 16px;
      // padding: 0 16px;
      ::v-deep .el-tooltip {
        font-size: 12px !important;
        font-weight: 500;
        text-align: center;
        color: #39404d;
      }
    }
  }
}

.table_box_text {
  font-size: 14px;
  text-align: left;
  color: #646b80;
  line-height: 16px;
  margin-bottom: 20px;
}

.table_box_across {
  display: block;
  width: 30px;
  height: 20px;
  background: #d2d8e2;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}
.table_box_vertical {
  display: block;
  width: 20px;
  height: 30px;
  background: #d2d8e2;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.el_dialog_left {
  width: 220px;
  height: 524px;
  .el_dialog_left_div {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: #39404d;
    line-height: 16px;
    padding: 12px 24px;
    cursor: pointer;
  }
  .el_dialog_left_div:hover {
    background: #f2f5fa;
    color: var(--text-color) !important;
    div {
      background: #f2f5fa;
      color: var(--text-color) !important;
    }
  }
}

.el_dialog_line {
  border-right: 1px solid #ececee;
}

.el_dialog_foot {
  padding: 20px 0 0 0;
  text-align: right;
}

.el_button {
  min-width: 128px;
  background: #f5f5f5 !important;
  border: none !important;
  border-radius: 5px;
  color: #39404d !important;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.el_button2 {
  margin-left: 12px !important;
  background: var(--text-color) !important;
  color: #ffffff !important;
  border: 1px solid var(--text-color);
}

.el_dialog_foot2 {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.active1 {
  background: #f2f5fa;
  color: var(--text-color);
}
.active2 {
  overflow: hidden;
  overflow-y: scroll; //纵行超过隐藏
}

.active3 {
  border: 1px solid var(--text-color);
}

.table_bottom {
  height: 64px;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  // width: 100%;
  // overflow: hidden;
  // overflow-x: scroll; //纵行超过隐藏
  background: #ffffff;
  z-index: 20;
  .table_bottom_btn {
    width: 220px !important;
    min-width: 220px;
    height: 44px;
    background: var(--text-color);
    border-radius: 6px;
    line-height: 44px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    margin-left: 845px;
    cursor: pointer;
  }
}
.fenye {
  width: 100%;
  text-align: right;
  padding: 18px 6px 0 0;
  ::v-deep .el-pagination {
    padding-right: 0 !important;
  }
  ::v-deep .btn-next {
    margin-right: 0 !important;
  }
}
@media screen and (min-width: 1332px) {
  .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
